<template>
    <el-dialog :model-value="visible" :title="title" :width="width" top="5vh" :before-close="onClose" append-to-body>
        <div :style="{ height: height }">
            <el-scrollbar>
                <div style="padding: 0 10px;">
                    <slot name="content"></slot>
                </div>
            </el-scrollbar>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onClose">取消</el-button>
                <el-button type="primary" @click="onConfirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>

const props = defineProps({
    title: {
        type: String,
        default: '标题',
    },
    visible: {
        type: Boolean,
        default: false,
    },
    width: {
        type: String,
        default: '600px',
    },
    height: {
        type: String,
        default: '250px',
    }
})

const emit = defineEmits(['onClose', 'onConfirm'])

// 关闭弹窗
const onClose = () => {
    emit('onClose')
}
// 确认
const onConfirm = () => {
    emit('onConfirm')
}

</script>

<style scoped lang='scss'>
.el-dialog {
    width: 1000px !important;

    :deep(.el-dialog__body) {
        padding: 0px !important;
    }
}
</style>